<template>
  <div class="moneyDetail">
    <div style="padding-bottom:54px">
      <!-- 头部 -->
      <div>
        <div style="padding:30px 0 16px 15px" class="flex">
          <p class="classify">分类</p>
          <span class="name ellipsis">{{res.product.classifyName}}</span>
        </div>
        <p class="standard">业绩比较基准</p>
        <!-- <img src="/static/images/manage/detailBg.png" class="detailBg" alt /> -->
        <div class="detailBg">
          <div class="percent" v-if="res.product.baseComparison.length===1">
            <span v-if="res.product.baseComparison[0].prop==='0'">浮动</span>
            <span v-else>{{res.product.baseComparison[0].prop}}%</span>
          </div>
          <div class="percent" v-if="res.product.baseComparison.length>1">
            <span
              v-if="res.product.baseComparison[0].prop==='0' && res.product.baseComparison[res.product.baseComparison.length-1].prop==='0'"
            >浮动</span>
            <span
              v-else
            >{{res.product.baseComparison[0].prop}}%~{{res.product.baseComparison[res.product.baseComparison.length-1].prop}}%</span>
          </div>

          <!-- <div
            class="percent"
            v-if="res.product.baseComparison.length===1"
          >{{res.product.baseComparison[0].prop}}%</div>
          <div
            class="percent"
            v-else
          >{{res.product.baseComparison[0].prop}}%~{{res.product.baseComparison[res.product.baseComparison.length-1].prop}}%</div>-->
          <div class="flex" style="margin-top: 16px;">
            <div class="safe flex">
              <img src="/static/images/manage/safe.png" alt />
              <span>{{res.product.productRiskLevel}}</span>
            </div>
            <div class="grade">{{res.product.startingAmount}}万元起投</div>
          </div>
        </div>
        <!-- /**基本信息 */ -->
        <div class="info">
          <div class="flex" style=" align-items: center;">
            <p class="incon"></p>
            <span class="basic">基本信息</span>
          </div>
          <div class="flex" style="margin-top:20px">
            <p class="infoLeft">业绩比较基准</p>
            <div class="flex-1 infoRight" style="padding-left:20px">
              <div>
                <p v-for="(item ,index) in res.product.baseComparison" :key="index">
                  <span>{{item.min}}</span>
                  <span>{{text}}</span>
                  <span>{{item.max}}</span>
                  <span>万元,</span>
                  <span>{{item.prop}}%</span>
                </p>
              </div>
            </div>
          </div>
          <div class="flex" style="margin-top:20px">
            <p class="infoLeft">认购金额范围</p>
            <p
              class="flex-1 infoRight"
            >{{res.product.startingAmount?res.product.startingAmount:""}}万元起</p>
          </div>
          <div class="flex" style="margin-top:20px">
            <p class="infoLeft">起息日</p>
            <p class="flex-1 infoRight">{{res.product.interestDay?res.product.interestDay:"-"}}</p>
          </div>
          <div class="flex" style="margin-top:20px">
            <p class="infoLeft">期限类型</p>
            <p class="flex-1 infoRight">{{res.product.raisingPeriod}}个月</p>
          </div>
          <div class="flex" style="margin-top:20px">
            <p class="infoLeft">回款方式</p>
            <p class="flex-1 infoRight">{{res.product.distributionMode}}</p>
          </div>
          <div class="flex" style="margin-top:20px">
            <p class="infoLeft">产品风险等级</p>
            <p class="flex-1 infoRight">{{res.product.productRiskLevel}}</p>
          </div>
        </div>
        <div class="gray"></div>
        <div class="showType">
          <div class="flex" style="padding-top:20px" @click="jump(1)">
            <p class="infoLeft flex-1">风险揭示</p>
            <img src="/static/images/manage/right.png" style="width:10px;height:14px" alt />
          </div>
          <div
            class="flex"
            style="padding:20px 0;border-bottom:0.5px solid #E6E6E6"
            @click="jump(2)"
          >
            <p class="infoLeft flex-1">项目详情</p>
            <img src="/static/images/manage/right.png" style="width:10px;height:14px" alt />
          </div>
        </div>
      </div>
      <!-- /**底部 */ -->
      <div class="bottom flex">
        <div style=" margin-right: 26px;" @click="jumpCollect">
          <img :src="'/static/images/manage/sartIcon'+(res.collection?2:1)+'.png'" alt />
          <!-- <img v-if="collect" src="/static/images/manage/sartIcon2.png" alt />
          <img v-else src="/static/images/manage/sartIcon1.png" alt />-->
          <p class="collect">{{res.collection?"已收藏":"收藏"}}</p>
        </div>
        <div
          class="btn"
          v-if="res.product.auditStatus==='RAISING'"
          @click="jumpFinancial"
        >{{identity==='FINANCIAL'?'选择客户':'预约理财师'}}</div>
        <div class="btn" v-else style="background:#ccc">{{identity==='FINANCIAL'?'选择客户':'预约理财师'}}</div>
      </div>
    </div>
  </div>
</template>
<script>
import {
  productInfo,
  postCollection,
  closeCollection,
  productPhone
} from "@/api/api";
export default {
  data() {
    return {
      financial: false,
      text: "万元<=认购金额<",
      tel: "110",
      id: null,
      identity: "USER",
      res: {
        collection: false,
        product: {
          baseComparison: [{ main: "", max: "", prop: "" }]
        }
      }
    };
  },
  mounted() {
    Object.assign(this.$data, this.$options.data());
    wx.setNavigationBarTitle({
      title: this.$mp.query.name ? this.$mp.query.name : "产品详情"
    });
    this.id = this.$mp.query.id;
    this.identity = this.$mp.query.identity ? this.$mp.query.identity : "USER";
    console.log(this.$mp.query);
    this.productInfo();
    if (this.identity === "USER") {
      this.productPhone();
    }
  },
  methods: {
    /** 理财师电话 */
    async productPhone() {
      await productPhone().then(res => {
        this.tel = res;
        console.log(res);
      });
    },
    /** 详情 */
    async productInfo() {
      wx.showLoading({
        title: "加载中",
        icon: "none",
        mask: true
      });
      await productInfo({ id: this.id }).then(res => {
        wx.hideLoading();
        console.log(res, "rrrrrrrrrrrr");
        this.res = res;
      });
    },
    jump(type) {
      wx.navigateTo({
        url: `/pages/money/children/richText/main?id=${this.id}&type=${type}`
      });
    },
    /** 收藏 */
    async jumpCollect() {
      // this.res.collection = !this.res.collection;
      if (!this.res.collection) {
        await postCollection({ productId: this.id }).then(res => {
          wx.showToast({
            title: "收藏成功",
            icon: "success",
            duration: 2000
          });
          this.productInfo();
          this.res.collection = true;
        });
      } else {
        wx.showModal({
          title: "提示",
          content: "是否取消收藏",
          success: res => {
            if (res.confirm) {
              closeCollection(this.id).then(res => {
                this.productInfo();
                this.res.collection = false;
              });
            } else if (res.cancel) {
            }
          }
        });

        // closeCollection(this.id).then(res => {
        //   this.productInfo();
        //   this.res.collection = false;
        // });
      }
    },
    /** 预约理财师 */
    jumpFinancial() {
      var that = this;
      console.log(that.identity, "ttttt");
      if (that.identity === "USER") {
        wx.showModal({
          content: `${that.tel}`,
          confirmText: "呼叫",
          confirmColor: "#187798",
          cancelColor: "#6B6B6B",
          success(res) {
            if (res.confirm) {
              wx.makePhoneCall({
                phoneNumber: that.tel.toString()
              });
              console.log("用户点击确定");
            } else if (res.cancel) {
              console.log("用户点击取消");
            }
          }
        });
      } else {
        var baseComparison = "";
        if (this.res.product.baseComparison.length === 1) {
          baseComparison = this.res.product.baseComparison[0].prop + "%";
        } else {
          baseComparison =
            this.res.product.baseComparison[0].prop +
            "%~" +
            // eslint-disable-next-line standard/computed-property-even-spacing
            this.res.product.baseComparison[
              this.res.product.baseComparison.length - 1
            ].prop +
            "%";
        }
        wx.navigateTo({
          url: `/pages/money/children/changeClient/main?name=${
            this.res.product.name
          }&baseComparison=${baseComparison}&productId=${this.id}`
        });
      }
    }
  }
};
</script>
<style lang="less" scoped>
.moneyDetail {
  .showType {
    padding: 0 15px 20px;
  }
  .classify {
    width: 35px;
    height: 18px;
    text-align: center;
    background: rgba(24, 119, 152, 1);
    border-radius: 2px;
    font-size: 11px;
    color: rgba(255, 255, 255, 1);
    line-height: 18px;
  }
  .bottom {
    width: 100%;
    background: #fff;
    z-index: 3;
    position: fixed;
    left: 0;
    bottom: 0;
    height: 54px;
    text-align: center;
    justify-content: center;
    align-items: center;
    border-top: 1px solid #e6e6e6;
    img {
      width: 19px;
      height: 19px;
    }
    .collect {
      font-size: 11px;
      color: #909292;
    }
    .btn {
      width: 287px;
      height: 42px;
      line-height: 42px;
      font-size: 14px;
      color: #fff;
      background: rgba(24, 119, 152, 1);
      border-radius: 2px;
    }
  }
  .gray {
    width: 375px;
    height: 10px;
    background: rgba(247, 247, 246, 1);
  }
  .info {
    padding: 25px 15px 20px 15px;

    .incon {
      width: 5px;
      height: 17px;
      background: linear-gradient(
        360deg,
        rgba(255, 255, 255, 1) 0%,
        rgba(53, 181, 175, 1) 100%
      );
      border-radius: 3px;
    }
    .basic {
      font-size: 18px;
      color: #020604;
      margin-left: 10px;
      font-weight: bold;
    }
  }
  .infoLeft {
    font-size: 14px;
    color: #020604;
  }
  .infoRight {
    text-align: right;
    font-size: 14px;
    color: #6b6b6b;
  }
  .detailBg {
    background: url("https://qinghe-zichan.oss-cn-shanghai.aliyuncs.com/imgs/detailBg.png");
    background-size: 100% 100%;
    background-repeat: no-repeat;
    padding-left: 15px;
    height: 108px;
    .percent {
      color: #f45247;
      font-size: 38px;
    }
    .grade {
      padding: 2px 10px;
      border-radius: 2px;
      background: #fff;
      border: 1px solid rgba(184, 186, 185, 1);
      font-size: 11px;
      color: #909292;
      margin-left: 10px;
    }
    .safe {
      padding: 2px 10px;
      color: #d4a45d;
      font-size: 12px;
      background: rgba(255, 250, 237, 1);
      border-radius: 2px;
      border: 0.5px solid rgba(212, 164, 93, 1);
      justify-content: center;
      align-items: center;
      img {
        margin-left: -3px;
        width: 12px;
        margin-right: 3px;
        height: 12px;
      }
    }
  }
  .standard {
    padding: 0 0 5px 15px;
    font-size: 12px;
    color: #909292;
  }
  .name {
    font-size: 15px;
    color: #020604;
    font-weight: bold;
    margin-left: 10px;
  }
}
</style>